<template>
  <div class="comment-publisher" :class="{ compact }">
    <!-- 用户头像 -->
    <div v-if="!compact" class="publisher-avatar">
      <el-avatar
        :size="40"
        :src="formatAvatarUrl(userInfo.avatar)"
        :alt="userInfo.nickName"
      >
        {{ userInfo.nickName.charAt(0) }}
      </el-avatar>
    </div>

    <!-- 编辑区域 -->
    <div class="publisher-content">
      <!-- 输入框容器 -->
      <div class="textarea-container">
        <el-input
          ref="textareaRef"
          v-model="content"
          type="textarea"
          :placeholder="placeholder"
          :rows="compact ? 3 : 4"
          :maxlength="1000"
          show-word-limit
          resize="none"
          @keydown.ctrl.enter="handlePublish"
          @keydown.meta.enter="handlePublish"
        />

        <!-- 工具栏 - 位于输入框左下角 -->
        <div class="input-toolbar">
          <!-- 表情选择器 -->
          <div class="emoji-picker-trigger">
            <el-popover
              ref="emojiPopoverRef"
              :visible="showEmojiPicker"
              placement="top-start"
              :width="400"
              trigger="manual"
              popper-class="emoji-popover"
            >
              <template #reference>
                <el-button
                  text
                  size="small"
                  :disabled="publishing"
                  class="emoji-btn"
                  title="添加表情"
                  @click="toggleEmojiPicker"
                >
                  <span class="emoji-icon">😊</span>
                </el-button>
              </template>

              <!-- 表情选择器内容 -->
              <SimpleEmojiPicker @select="onEmojiSelect" />
            </el-popover>
          </div>

          <!-- 图片上传按钮 -->
          <div class="image-upload-trigger">
            <el-button
              text
              size="small"
              :disabled="publishing"
              class="image-upload-btn"
              title="添加图片"
              @click="triggerImageUpload"
            >
              <el-icon><Picture /></el-icon>
            </el-button>
          </div>
        </div>
      </div>

      <!-- 图片预览区域 - 在输入框内显示 -->
      <div v-if="imageList.length > 0" class="image-preview-container">
        <div class="image-preview-grid">
          <div
            v-for="(image, index) in imageList"
            :key="image.id || image.tempId"
            class="image-preview-item"
          >
            <div class="image-wrapper">
              <img
                :src="image.previewUrl || formatImageUrl(image.fileUrl)"
                :alt="image.originalName"
                class="preview-image"
                @click="previewImage(index)"
              />

              <!-- 上传进度 -->
              <div v-if="image.uploading" class="upload-progress">
                <el-progress
                  :percentage="image.progress"
                  :show-text="false"
                  :stroke-width="2"
                />
                <span class="progress-text">{{ image.progress }}%</span>
              </div>

              <!-- 删除按钮 -->
              <div class="image-actions">
                <el-button
                  type="danger"
                  size="small"
                  circle
                  :disabled="image.uploading"
                  @click="removeImage(index)"
                >
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>

              <!-- 上传失败标识 -->
              <div v-if="image.error" class="upload-error">
                <el-icon><Warning /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 隐藏的文件上传组件 -->
      <el-upload
        ref="uploadRef"
        :auto-upload="false"
        :show-file-list="false"
        :accept="acceptTypes"
        :multiple="true"
        :limit="maxImages"
        style="display: none"
        @change="handleFileChange"
        @exceed="handleExceed"
      />

      <!-- 操作栏 -->
      <div class="publisher-actions">
        <!-- 左侧工具栏 -->
        <div class="action-tools">
          <!-- 图片数量提示 -->
          <div v-if="imageList.length > 0" class="image-count-tip">
            <el-icon><Picture /></el-icon>
            <span>{{ imageList.length }}/{{ maxImages }}</span>
          </div>
        </div>

        <!-- 右侧按钮组 -->
        <div class="action-buttons">
          <!-- 字数统计 -->
          <div class="word-count">
            <span :class="{ 'text-danger': content.length > 1000 }">
              {{ content.length }}/1000
            </span>
          </div>

          <el-button v-if="showCancel" size="small" @click="handleCancel">
            取消
          </el-button>

          <el-button
            type="primary"
            :loading="publishing"
            :disabled="!canPublish"
            size="small"
            @click="handlePublish"
          >
            {{ publishButtonText }}
          </el-button>
        </div>
      </div>

      <!-- 提示信息 -->
      <div v-if="!compact" class="publisher-tips">
        <span class="tip-text">Ctrl + Enter 快速发布</span>
        <span v-if="imageList.length === 0" class="tip-text"
          >• 点击左下角图标添加图片</span
        >
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="图片预览"
      width="80%"
      :before-close="closePreview"
    >
      <div class="image-preview-dialog">
        <img
          v-if="currentPreviewImage"
          :src="
            currentPreviewImage.previewUrl ||
            formatImageUrl(currentPreviewImage.fileUrl)
          "
          :alt="currentPreviewImage.originalName"
          class="preview-dialog-image"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Picture, Close, Warning } from "@element-plus/icons-vue";
// import { IconifyIconOnline } from "@/components/ReIcon"; // 不再需要
import SimpleEmojiPicker from "./SimpleEmojiPicker.vue";
import type { UploadFile, UploadFiles } from "element-plus";
import type {
  CreateCommentRequest,
  ArticleCommentResponse
} from "@/api/user-comment";
import {
  createCommentApi,
  UserCommentUtils,
  isApiResponseSuccess
} from "@/api/user-comment";
import {
  createCommentWithImagesApi,
  type CreateCommentWithImagesRequest,
  type CommentWithImagesResponse,
  generateUploadTokenApi,
  uploadCommentImageApi,
  CommentImageUtils,
  type CommentImageInfo
} from "@/api/comment-image";
import { FileUploadType, UnifiedFileUploadUtils } from "@/api/unified-upload";
import { useUserAuthStore } from "@/store/modules/userAuth";
import { formatAvatarUrl, formatImageUrl } from "@/utils/avatar";

// Props定义
interface Props {
  /** 文章ID */
  articleId: number;
  /** 父评论ID（回复时使用） */
  parentId?: number | null;
  /** 被回复用户ID（回复时使用） */
  replyToUserId?: number | null;
  /** 输入框占位符 */
  placeholder?: string;
  /** 紧凑模式 */
  compact?: boolean;
  /** 是否显示取消按钮 */
  showCancel?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  parentId: null,
  replyToUserId: null,
  placeholder: "发表你的评论...",
  compact: false,
  showCancel: true
});

// Emits定义
const emit = defineEmits<{
  publish: [comment: ArticleCommentResponse];
  cancel: [];
  contentChange: [hasContent: boolean];
}>();

// 用户认证store
const userAuthStore = useUserAuthStore();

// 图片项接口
interface ImageItem extends Partial<CommentImageInfo> {
  tempId?: string;
  file?: File;
  previewUrl?: string;
  uploading?: boolean;
  progress?: number;
  error?: boolean;
  uploadToken?: string;
}

// 响应式数据
const content = ref("");
const publishing = ref(false);
const uploadRef = ref();
const imageList = ref<ImageItem[]>([]);
const uploadToken = ref<string>("");
const previewVisible = ref(false);
const currentPreviewImage = ref<ImageItem | null>(null);
const maxImages = 9;

// 组件引用
const textareaRef = ref();

// 表情选择器相关
const showEmojiPicker = ref(false);
const emojiPopoverRef = ref();

// 计算属性
const userInfo = computed(() => ({
  userId: userAuthStore.userId || 0,
  nickName: userAuthStore.nickName || userAuthStore.userName || "用户",
  avatar: userAuthStore.avatar || ""
}));

const isReply = computed(() => props.parentId !== null);

const publishButtonText = computed(() => {
  return isReply.value ? "回复" : "发布";
});

const canPublish = computed(() => {
  const validation = UserCommentUtils.validateContent(content.value);
  const hasContent =
    content.value.trim().length > 0 || imageList.value.length > 0;
  return validation.valid && hasContent && !publishing.value;
});

// 计算属性
const acceptTypes = computed(() => {
  return CommentImageUtils.SUPPORTED_FORMATS.join(",");
});

const canAddMore = computed(() => {
  return !publishing.value && imageList.value.length < maxImages;
});

// 生成上传令牌
const generateUploadToken = async (): Promise<string> => {
  if (uploadToken.value) {
    return uploadToken.value;
  }

  try {
    const response = await generateUploadTokenApi();
    if (response.code === 200 && response.data) {
      uploadToken.value = response.data;
      return response.data;
    } else {
      throw new Error(response.message || "生成上传令牌失败");
    }
  } catch (error) {
    console.error("生成上传令牌失败:", error);
    throw error;
  }
};

// 表情选择器方法
const toggleEmojiPicker = () => {
  showEmojiPicker.value = !showEmojiPicker.value;
};

const onEmojiSelect = (emoji: string) => {
  console.log("🎭 表情选择:", emoji);

  // 先关闭表情选择器，避免事件冲突
  showEmojiPicker.value = false;

  // 使用nextTick确保DOM更新后再处理表情插入
  nextTick(() => {
    // 尝试多种方式获取textarea元素
    let textarea: HTMLTextAreaElement | null = null;

    // 方式1: 通过el-input组件的ref获取
    if (textareaRef.value) {
      // Element Plus的el-input组件可能有不同的内部结构
      textarea =
        textareaRef.value.$el?.querySelector("textarea") ||
        textareaRef.value.$el?.querySelector(".el-textarea__inner") ||
        textareaRef.value.textarea;
    }

    // 方式2: 如果方式1失败，使用更具体的选择器（限定在当前组件内）
    if (!textarea && textareaRef.value?.$el) {
      textarea = textareaRef.value.$el.querySelector("textarea");
    }

    // 方式3: 如果还是失败，使用全局选择器但限定在当前组件的父容器内
    if (!textarea) {
      const currentComponent =
        textareaRef.value?.$el?.closest(".comment-publisher");
      if (currentComponent) {
        textarea = currentComponent.querySelector("textarea");
      }
    }

    console.log("🎯 找到的textarea:", textarea);

    if (textarea) {
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const text = content.value;

      content.value = text.slice(0, start) + emoji + text.slice(end);

      // 恢复光标位置
      nextTick(() => {
        textarea!.focus();
        const newPosition = start + emoji.length;
        textarea!.setSelectionRange(newPosition, newPosition);
      });

      console.log("✅ 表情插入成功");
    } else {
      // 如果无法获取光标位置，直接在末尾添加
      content.value += emoji;
      console.log("⚠️ 无法获取textarea，在末尾添加表情");
    }
  });
};

// 触发图片上传
const triggerImageUpload = () => {
  if (!canAddMore.value) {
    ElMessage.warning(`最多只能上传 ${maxImages} 张图片`);
    return;
  }
  uploadRef.value?.$el.querySelector('input[type="file"]')?.click();
};

// 处理文件选择
const handleFileChange = async (file: UploadFile, files: UploadFiles) => {
  const newFiles = files.slice(-1); // 只处理最新选择的文件

  for (const uploadFile of newFiles) {
    if (!uploadFile.raw) continue;

    // 验证文件
    const validation = CommentImageUtils.validateImageFile(uploadFile.raw);
    if (!validation.valid) {
      ElMessage.error(validation.message);
      continue;
    }

    // 检查数量限制
    const limitCheck = CommentImageUtils.checkImageLimit(
      imageList.value.length,
      1
    );
    if (!limitCheck.valid) {
      ElMessage.error(limitCheck.message);
      break;
    }

    // 创建图片项
    const imageItem: ImageItem = {
      tempId: `temp_${Date.now()}_${Math.random()}`,
      file: uploadFile.raw,
      originalName: uploadFile.name,
      fileSize: uploadFile.raw.size,
      contentType: uploadFile.raw.type,
      previewUrl: CommentImageUtils.generatePreviewUrl(uploadFile.raw),
      uploading: true,
      progress: 0,
      error: false
    };

    // 添加到列表
    imageList.value.push(imageItem);

    // 开始上传
    uploadImage(imageItem);
  }

  // 清空文件选择
  uploadRef.value?.clearFiles();
};

// 处理文件数量超限
const handleExceed = () => {
  ElMessage.warning(`最多只能上传 ${maxImages} 张图片`);
};

// 上传图片
const uploadImage = async (imageItem: ImageItem) => {
  if (!imageItem.file) return;

  try {
    // 先使用统一工具进行文件验证
    const validation = UnifiedFileUploadUtils.validateFile(
      imageItem.file!,
      FileUploadType.COMMENT_IMAGE
    );
    if (!validation.valid) {
      throw new Error(validation.message || "文件验证失败");
    }

    // 生成上传令牌
    const token = await generateUploadToken();
    imageItem.uploadToken = token;

    // 模拟上传进度
    const progressInterval = setInterval(() => {
      if (imageItem.progress! < 90) {
        imageItem.progress = (imageItem.progress || 0) + 10;
      }
    }, 100);

    // 上传文件 - 使用原来的评论图片上传API（保持兼容性）
    const response = await uploadCommentImageApi(imageItem.file!, token);

    clearInterval(progressInterval);

    if (response.code === 200 && response.data) {
      // 上传成功
      imageItem.progress = 100;
      imageItem.uploading = false;

      // 更新图片信息
      Object.assign(imageItem, response.data.imageInfo);
      imageItem.id = response.data.tempImageId;

      ElMessage.success("图片上传成功");
    } else {
      throw new Error(response.message || "图片上传失败");
    }
  } catch (error) {
    console.error("图片上传失败:", error);

    imageItem.uploading = false;
    imageItem.error = true;
    imageItem.progress = 0;

    const errorMessage = CommentImageUtils.formatErrorMessage(error);
    ElMessage.error(errorMessage);
  }
};

// 移除图片
const removeImage = async (index: number) => {
  const imageItem = imageList.value[index];

  if (imageItem.uploading) {
    ElMessage.warning("图片正在上传中，请稍后再试");
    return;
  }

  try {
    await ElMessageBox.confirm("确定要删除这张图片吗？", "确认删除", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    // 释放预览URL
    if (imageItem.previewUrl) {
      CommentImageUtils.revokePreviewUrl(imageItem.previewUrl);
    }

    // 从列表中移除
    imageList.value.splice(index, 1);
  } catch {
    // 用户取消删除
  }
};

// 预览图片
const previewImage = (index: number) => {
  currentPreviewImage.value = imageList.value[index];
  previewVisible.value = true;
};

// 关闭预览
const closePreview = () => {
  previewVisible.value = false;
  currentPreviewImage.value = null;
};

// 清空图片
const clearImages = () => {
  imageList.value.forEach(item => {
    if (item.previewUrl) {
      CommentImageUtils.revokePreviewUrl(item.previewUrl);
    }
  });
  imageList.value = [];
};

// 处理发布
const handlePublish = async () => {
  if (!canPublish.value) {
    return;
  }

  // 验证内容（如果有图片，内容可以为空）
  if (imageList.value.length === 0) {
    const validation = UserCommentUtils.validateContent(content.value);
    if (!validation.valid) {
      ElMessage.error(validation.message || "请输入有效的评论内容");
      return;
    }
  }

  try {
    publishing.value = true;

    // 获取上传的图片
    const images = imageList.value;

    // 检查是否有正在上传的图片
    const uploadingImages = images.filter((img: any) => img.uploading);
    if (uploadingImages.length > 0) {
      ElMessage.warning("请等待图片上传完成");
      return;
    }

    // 检查是否有上传失败的图片
    const errorImages = images.filter((img: any) => img.error);
    if (errorImages.length > 0) {
      ElMessage.error("存在上传失败的图片，请重新上传");
      return;
    }

    let response;

    if (images.length > 0) {
      // 带图片的评论
      const tempImageIds = images
        .filter((img: any) => img.id)
        .map((img: any) => img.id);

      const request: CreateCommentWithImagesRequest = {
        articleId: props.articleId,
        content: content.value.trim(),
        parentId: props.parentId,
        tempImageIds: tempImageIds
      };

      console.log("📝 发布带图片评论请求:", request);
      response = await createCommentWithImagesApi(request);
    } else {
      // 普通评论
      const request: CreateCommentRequest = {
        articleId: props.articleId,
        content: content.value.trim(),
        parentId: props.parentId,
        replyToUserId: props.replyToUserId
      };

      console.log("📝 发布评论请求:", request);
      response = await createCommentApi(request);
    }

    console.log("📝 发布评论响应:", response);

    if (response.code === 200 && response.data) {
      // 清空输入框和图片
      content.value = "";
      clearImages();

      // 通知父组件（父组件会显示成功提示）
      emit("publish", response.data);
    } else {
      ElMessage.error(response.message || "评论发表失败");
    }
  } catch (error) {
    console.error("发布评论失败:", error);
    ElMessage.error(UserCommentUtils.formatErrorMessage(error));
  } finally {
    publishing.value = false;
  }
};

// 处理取消
const handleCancel = () => {
  content.value = "";
  clearImages();
  emit("cancel");
};

// 监听内容变化，通知父组件
watch(
  content,
  newContent => {
    const hasContent = newContent.trim().length > 0;
    emit("contentChange", hasContent);
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
// 移动端适配
@media (width <= 768px) {
  .comment-publisher {
    gap: 8px;

    .publisher-content {
      .image-preview-container {
        .image-preview-grid {
          grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
          gap: 6px;
        }
      }

      .publisher-actions {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;

        .action-tools {
          justify-content: flex-start;
        }

        .action-buttons {
          justify-content: flex-end;
        }
      }
    }
  }
}

.comment-publisher {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  transition: all 0.2s ease;

  &.compact {
    padding: 0;
    background: transparent;

    .publisher-content {
      .publisher-actions {
        margin-top: 12px;
      }
    }
  }

  .publisher-avatar {
    flex-shrink: 0;
  }

  .publisher-content {
    flex: 1;
    min-width: 0;

    .textarea-container {
      position: relative;

      .el-textarea {
        :deep(.el-textarea__inner) {
          padding: 12px 16px 40px; // 增加底部padding为图片按钮留空间
          font-size: 15px;
          line-height: 1.6;
          background: #f8f9fa;
          border: 1px solid #e4e6ea;
          border-radius: 8px;
          transition: all 0.2s ease;

          &:hover {
            background: #fff;
          }

          &:focus {
            background: #fff;
            border-color: #1e80ff;
          }

          &::placeholder {
            color: #8a919f;
          }
        }
      }

      .input-toolbar {
        position: absolute;
        bottom: 8px;
        left: 12px;
        z-index: 10;
        display: flex;
        gap: 4px;
        align-items: center;

        .emoji-picker-trigger,
        .image-upload-trigger {
          .emoji-btn,
          .image-upload-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            color: #8a919f;
            background: transparent;
            border: none;
            border-radius: 6px;
            transition: all 0.2s ease;

            &:hover {
              color: #1e80ff;
              background: rgb(30 128 255 / 6%);
            }

            &:disabled {
              color: #c9cdd4;
              cursor: not-allowed;
            }

            .el-icon {
              font-size: 18px;
            }

            .emoji-icon {
              font-size: 18px;
              line-height: 1;
            }
          }
        }
      }
    }

    .image-preview-container {
      padding: 12px;
      margin-top: 12px;
      background: #f8f9fa;
      border: 1px solid #e4e6ea;
      border-radius: 8px;

      .image-preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;

        .image-preview-item {
          position: relative;
          aspect-ratio: 1;
          overflow: hidden;
          background: #fff;
          border: 1px solid #e4e6ea;
          border-radius: 6px;

          .image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;

            .preview-image {
              width: 100%;
              height: 100%;
              cursor: pointer;
              object-fit: cover;
              transition: transform 0.2s ease;

              &:hover {
                transform: scale(1.05);
              }
            }

            .upload-progress {
              position: absolute;
              right: 0;
              bottom: 0;
              left: 0;
              padding: 4px 8px;
              font-size: 12px;
              color: white;
              background: rgb(0 0 0 / 70%);

              .progress-text {
                display: block;
                margin-top: 2px;
                text-align: center;
              }
            }

            .image-actions {
              position: absolute;
              top: 4px;
              right: 4px;
              opacity: 0;
              transition: opacity 0.2s ease;

              .el-button {
                width: 20px;
                height: 20px;
                min-height: 20px;
                padding: 0;
                background: rgb(0 0 0 / 60%);
                border: none;

                .el-icon {
                  font-size: 12px;
                }
              }
            }

            .upload-error {
              position: absolute;
              inset: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              color: #ff4757;
              background: rgb(255 0 0 / 10%);

              .el-icon {
                font-size: 16px;
              }
            }

            &:hover .image-actions {
              opacity: 1;
            }
          }
        }
      }
    }

    .publisher-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .action-tools {
        display: flex;
        gap: 8px;
        align-items: center;

        .image-count-tip {
          display: flex;
          gap: 4px;
          align-items: center;
          padding: 4px 8px;
          font-size: 13px;
          color: #8a919f;
          background: rgb(30 128 255 / 6%);
          border-radius: 4px;

          .el-icon {
            font-size: 14px;
            color: #1e80ff;
          }
        }
      }

      .action-buttons {
        display: flex;
        gap: 12px;
        align-items: center;

        .word-count {
          font-size: 13px;
          font-weight: 500;
          color: #8a919f;

          .text-danger {
            color: #ff6b6b;
          }
        }

        .el-button {
          padding: 8px 20px;
          font-weight: 500;
          border-radius: 6px;
          transition: all 0.2s ease;

          &:not(.el-button--primary) {
            color: #8a919f;
            background: #f2f3f5;
            border: none;

            &:hover {
              color: #1d2129;
              background: #e9ecef;
            }
          }

          &.el-button--primary {
            background: #1e80ff;
            border: none;

            &:hover {
              background: #06c;
            }

            &:disabled {
              background: #c9cdd4;
            }
          }
        }
      }
    }

    .publisher-tips {
      margin-top: 8px;

      .tip-text {
        font-size: 12px;
        font-style: italic;
        color: #8a919f;
      }
    }
  }
}

.image-preview-dialog {
  text-align: center;

  .preview-dialog-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }
}

// 暗色主题适配
.dark {
  .comment-publisher {
    background: #1e1e28;

    &.compact {
      background: transparent;
    }

    .publisher-content {
      .textarea-container {
        .el-textarea {
          :deep(.el-textarea__inner) {
            color: #e5e6eb;
            background: #2a2a3a;
            border-color: #3a3a4a;

            &:hover {
              background: #1e1e28;
            }

            &:focus {
              background: #1e1e28;
              border-color: #1e80ff;
            }

            &::placeholder {
              color: #86909c;
            }
          }
        }

        .image-upload-trigger {
          .image-upload-btn {
            color: #86909c;

            &:hover {
              color: #1e80ff;
              background: rgb(30 128 255 / 10%);
            }
          }
        }
      }

      .image-preview-container {
        background: #2a2a3a;
        border-color: #3a3a4a;

        .image-preview-grid {
          .image-preview-item {
            background: #1e1e28;
            border-color: #3a3a4a;
          }
        }
      }

      .publisher-actions {
        .action-tools {
          .image-count-tip {
            color: #86909c;
            background: rgb(30 128 255 / 10%);

            .el-icon {
              color: #1e80ff;
            }
          }
        }

        .action-buttons {
          .word-count {
            color: #86909c;

            .text-danger {
              color: #ff6b6b;
            }
          }

          .el-button {
            &:not(.el-button--primary) {
              color: #86909c;
              background: #2a2a3a;

              &:hover {
                color: #e5e6eb;
                background: #3a3a4a;
              }
            }
          }
        }
      }

      .publisher-tips {
        .tip-text {
          color: #86909c;
        }
      }
    }
  }
}

// 表情选择器弹窗样式
:global(.emoji-popover) {
  .el-popover__content {
    padding: 8px !important;
  }
}

// 表情选择器样式已移至 SimpleEmojiPicker.vue 组件中
</style>
